<template>
	<view class="container">
		<view class="header">
			<view class="logo">
				<image class="logoimg" src="/static/logo.png" mode=""></image>
			</view>
			<text class="welcome">欢迎注册</text>
		</view>

		<view class="form-container">
			<view class="input-group">
				<uni-icons type="phone" size="20" color="#9CA3AF" class="input-icon"></uni-icons>
				<input type="tel" @input="getmobile" placeholder="请输入手机号" class="input-field"
					placeholder-class="placeholder" />
			</view>

			<view class="input-group">
				<uni-icons type="locked" size="20" color="#9CA3AF" class="input-icon"></uni-icons>
				<input type="password" @input="getpassword" placeholder="请输入密码" class="input-field"
					placeholder-class="placeholder" />
			</view>

			<view class="input-group">
				<uni-icons type="link" size="20" color="#9CA3AF" class="input-icon"></uni-icons>
				<input type="text" @input="getcode" placeholder="请输入推荐码" class="input-field"
					placeholder-class="placeholder" />
			</view>

			<view class="forgot-password">
			</view>

			<button class="login-btn" @click="handleLogin">注 册</button>

			<view class="divider"></view>

			<view class="register">
				<text class="register-text">已有账号？</text>
				<text class="register-link" @click="navigateToRegister">立即登录</text>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		curl
	} from 'common/api.js';

	export default {
		data() {
			return {
				code: '',
				mobile: '',
				password: '',

			}
		},

		onLoad() {

		},
		methods: {
			// 返回登录
			navigateToRegister() {
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			getcode(e){
				this.code = e.detail.value;
			},
			getmobile(e) {
				this.mobile = e.detail.value;
			},
			getpassword(e) {
				this.password = e.detail.value;
			},
			handleLogin() {
				var that = this;

				curl('user/register', {
					mobile: this.mobile,
					password: this.password,
					code:this.code
				}).then((res) => {
					console.log(res.data);

					uni.showToast({
						title: res.msg,
						icon: 'none'
					});

					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('user', res.data.userinfo);

						uni.reLaunch({
							url: "/pages/index/index"
						});

					}



				});
			}

		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 128rpx;
		padding-bottom: 64rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		margin: auto;
		margin-bottom: 20px;
	}

	.logoimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10px;
	}
	

	.welcome {
		font-size: 28rpx;
		color: #6B7280;
	}

	.form-container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.input-group {
		width: 100%;
		height: 96rpx;
		position: relative;
		margin-bottom: 32rpx;
	}

	.input-icon {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	.eye-icon {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	.input-field {
		width: 100%;
		height: 100%;
		padding-left: 80rpx;
		padding-right: 80rpx;
		border: 1px solid #E5E7EB;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #111827;
		box-sizing: border-box;
	}

	.placeholder {
		color: #9CA3AF;
	}

	.forgot-password {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 48rpx;
	}

	.forgot-password text {
		font-size: 24rpx;
		color: #6B7280;
	}

	.login-btn {
		width: 100%;
		height: 96rpx;
		background-color: #4A90E2;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 8rpx;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.divider {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 64rpx 0;
	}

	.divider-line {
		flex: 1;
		height: 1px;
		background-color: #E5E7EB;
	}

	.divider-text {
		padding: 0 24rpx;
		font-size: 24rpx;
		color: #6B7280;
	}

	.social-login {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 48rpx;
		margin-bottom: 64rpx;
	}

	.social-btn {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #E5E7EB;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		background-color: transparent;
	}

	.agreement {
		width: 100%;
		margin-bottom: 64rpx;
	}

	.agreement-text {
		font-size: 24rpx;
		color: #6B7280;
	}

	.link {
		color: #4A90E2;
	}

	.register {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 16rpx;
	}

	.register-text {
		font-size: 24rpx;
		color: #6B7280;
	}

	.register-link {
		font-size: 24rpx;
		color: #4A90E2;
	}
</style>